<script setup>
import {IconJson} from "@/components/IconSelect/data";
import {computed, ref, toRef, watch} from "vue";
import {cloneDeep} from "lodash";

const props = defineProps({
  modelValue: {
    require: false,
    type: String
  }
})
const emit = defineEmits(['update:modelValue'])
const inputValue = toRef(props, 'modelValue')
const iconTypeList = ref([
  {label: 'Element Plus', value: 'ep'},
  {label: 'Font Awesome Solid', value: 'fa6-solid'},
  {label: 'Font Awesome Regular', value: 'fa6-regular'},
  {label: 'Font Awesome Brands', value: 'fa6-brands'},
  {label: 'Font Awesome 5 Solid', value: 'fa-solid'},
  {label: 'Font Awesome 5 Regular', value: 'fa-regular'},
  {label: 'Font Awesome 5 Brands', value: 'fa-brands'},
  {label: 'Font Awesome 4', value: 'fa'},
  {label: 'Fluent UI System Icons', value: 'fluent'},
  {label: 'Ant Design Icons', value: 'ant-design'},
  {label: 'Google Material Icons', value: 'ic'},
  {label: 'Material Design Icons', value: 'mdi'},
  {label: 'Material Symbols', value: 'material-symbols'},
  {label: 'Material Symbols Light', value: 'material-symbols-light'},
  {label: 'Tabler Icons', value: 'tabler'},
  {label: 'Carbon', value: 'carbon'},
]);
const selectedIcon = ref(props.modelValue)
const iconList = ref(IconJson);
const copyIconList = cloneDeep(iconList.value)
const currentType = ref('ep');
const modalRef = ref();
const pageSize = ref(36);
const currentPage = ref(1);
const filterValue = ref('')

const pageList = computed(() => {
  if (currentPage.value === 1) {
    return copyIconList[currentType.value]
        ?.filter((i) => i.includes(filterValue.value))
        .slice(currentPage.value - 1, pageSize.value)
  } else {
    return copyIconList[currentType.value]
        ?.filter((i) => i.includes(filterValue.value))
        .slice(
            pageSize.value * (currentPage.value - 1),
            pageSize.value * (currentPage.value - 1) + pageSize.value
        )
  }
})

const iconCount = computed(() => {
  return copyIconList[currentType.value] === undefined ? 0 : copyIconList[currentType.value].length
})

const open = () => {
  modalRef.value.handleOpen();
  if (props.modelValue && props.modelValue.indexOf(':') >= 0) {
    currentType.value = props.modelValue.substring(0, props.modelValue.indexOf(':'))
  }
}

const handleSelect = (item) => {
  let selectedItem = `${currentType.value}:${item}`;
  if (selectedIcon.value === selectedItem) {
    selectedIcon.value = '';
  } else {
    selectedIcon.value = selectedItem;
  }
}

const handleSubmit = () => {
  emit('update:modelValue', `${selectedIcon.value}`)
  modalRef.value.handleClose()
}

const onCurrentChange = (page) => {
  currentPage.value = page
}

watch(() => filterValue.value, () => {
  currentPage.value = 1
})

defineExpose({open})
</script>

<template>
  <div class="flex items-center justify-center border" style="width: 80px; height: 80px">
    <icon v-if="inputValue" :icon="inputValue" class="cursor-pointer" width="2em" height="2em" color="#333"
          @click="open"/>
    <icon v-else icon="ep:upload" class="cursor-pointer" color="#333" size="1.5em" @click="open"/>
  </div>
  <dialog-form ref="modalRef" modalTitle="图标" modalWidth="1000px" @submit="handleSubmit">
    <a-tabs v-model:active-key="currentType" position="left">
      <a-tab-pane v-for="item in iconTypeList" :key="item.value" :label="item.label" :name="item.value">
        <template #title>
          <a-tooltip :content="item.label" position="left">
            {{ item.label }}
          </a-tooltip>
        </template>

        <a-input-search v-model="filterValue" placeholder="请输入查询条件" class="mb-5"></a-input-search>

        <ul class="icon-list">
          <li
              v-for="(item,index) in pageList"
              :key="index"
              class="icon-item"
              @click="handleSelect(item)">
            <a-tooltip :content="`${currentType}:${item}`">
              <icon :icon="`${currentType}:${item}`" class="icons"
                    width="2em" height="2em" :color="selectedIcon === `${currentType}:${item}` ? '#409EFF' : '#333'"/>
            </a-tooltip>
            <span :class="{active:selectedIcon === `${currentType}:${item}`}">{{ item }}</span>
          </li>
        </ul>

        <a-divider border-style="dashed"/>

        <a-pagination
            class="flex justify-end"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="iconCount"
            show-total
            show-jumper
            show-page-size
            @change="onCurrentChange"/>
      </a-tab-pane>
    </a-tabs>
  </dialog-form>
</template>

<style scoped lang="scss">
.icon-list {
  overflow: hidden;
  list-style: none;
  padding: 0 !important;
  border-left: 1px solid #dcdfe6;
  border-radius: 4px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  cursor: pointer;
}

.icon-item {
  text-align: center;
  height: 90px;
  font-size: 12px;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  &:nth-child(-n+6) {
    border-top: 1px solid #dcdfe6;
  }

  .icons {
    &:focus {
      outline: unset;
    }

  }

  .active {
    color: #409EFF;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
